<template>
  <el-container class="all">
    <el-header height="80px">
      <h1>爱宠邦后台管理系统</h1>
      <button size="mini" @click="logout">
        退出
        <img src="../assets/arrow.png" alt />
      </button>
    </el-header>
    <el-container>
      <el-aside width="210px">
        <el-scrollbar style="height:580px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                eactive-text-color="#ffd04b"
              >
                <template v-if="state.position=='平台管理员'">
                  <el-submenu index="1" >
                    <template slot="title">
                      <i class="el-icon-plus"></i>
                      <span>管理员管理</span>
                    </template>
                    <el-menu-item-group style=" overflow: hidden">
                      <el-menu-item index="1-1">
                        <router-link to="/system/administratorList">管理员列表</router-link>
                      </el-menu-item>
                    
                    </el-menu-item-group>
                  </el-submenu>

                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>用户管理</span>
                    </template>
                    <el-menu-item-group style=" overflow: hidden">
                      <el-menu-item index="2-2" @click="userlist">用户列表</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>


                  <el-submenu index="3">
                    <template slot="title">
                      <i class="el-icon-more"></i>
                      <span>申请处理</span>
                    </template>
                    <el-menu-item-group style=" overflow: hidden">
                      <el-menu-item index="3-1" @click="manageapply">管理员申请</el-menu-item>
                      <el-menu-item index="3-2" @click="userapply">用户申请</el-menu-item>
                       <el-menu-item index="3-2" @click="storeapply">门店申请</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>

                </template>


                <template v-else-if="state.position=='门店管理员'">
                  <el-submenu index="4">
                    <template slot="title">
                      <i class="el-icon-tickets"></i>
                      <span>门店管理</span>
                    </template>
                    <el-menu-item-group style=" overflow: hidden">
                      <el-menu-item index="4-1">
                        <router-link to="/system/shopManage">
                          <el-link type="primary">门店列表</el-link>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="4-2">
                        <router-link to="/system/addShop">
                          <el-link type="primary">新增门店</el-link>
                        </router-link>
                      </el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>

                  <el-submenu index="5">
                    <template slot="title">
                      <i class="el-icon-edit-outline"></i>
                      <span>商品管理</span>
                    </template>
                    <el-menu-item-group style=" overflow: hidden">
                      <el-menu-item index="5-1">
                        <router-link to="/system/addgoods">商品添加</router-link>
                      </el-menu-item>
                      <el-menu-item index="5-2">
                        <router-link to="/system/goodslist">商品列表</router-link>
                      </el-menu-item>
                      <!-- <el-menu-item index="5-3">选项2</el-menu-item> -->
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="6">
                    <template slot="title">
                      <i class="el-icon-document"></i>
                      <span>订单管理</span>
                    </template>
                    <el-menu-item-group style=" overflow: hidden">
                      <el-menu-item index="6-1" @click="receivedAdress">收货地址管理</el-menu-item>
                      <el-menu-item index="6-2" @click="order">订单管理</el-menu-item>
                      <el-menu-item index="4-3" @click="orderSended">所有订单</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </template>
              </el-menu>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-footer height="80px">
      <p>中华人民共和国增值电信业务经营许可证 京B2-20190350 营业性演出许可证 京演（机构）（2019）4094号</p>
      <p>广播电视节目制作经营许可证 （京）字第08478号 网络文化经营许可证 京网文（2019）3837-369号</p>
    </el-footer>
  </el-container>
</template>

<script>
import axios from "axios";
import { log } from 'util';
let timeIsLogin;
export default {
  data() {
    return {
      //这是登录状态值，不要删掉
      state: {}
    };
  },

  mounted() {
    this.isLogin();
    timeIsLogin = setInterval(this.isLogin, 100000);
    this.state=JSON.parse(localStorage.usertoken1);
  },

  methods: {
    logout() {
      axios.get("/users/logout").then();
      this.$router.push({ name: "login" });
    },
    userlist: function() {
      this.$router.push("/system/userlist");
    },
    isLogin() {
      axios.post("/users/isLogin").then(res => {
        if (!res.data.isLogined) {
          clearInterval(timeIsLogin);
          this.$router.push("/login");
          // alert("您还没有登录，请先登录");
        }
      });
    },
    manageapply: function() {
      this.$router.push("/system/manageapply/2");
    },
    userapply: function() {
      this.$router.push("/system/userapply/1");
    },
    receivedAdress() {
      this.$router.push("/system/receivedAdress");
    },
    exit:function(){
      this.$router.push({name:"login"});
    },
    order(){
      this.$router.push("/system/order");
    },
    orderSended(){
      this.$router.push("/system/allOrder");
    },
    storeapply(){
       this.$router.push("/system/storeapply/3");
    }
  }
};
</script>

<style>
img {
  width: 18px;
  margin-left: 5px;
}
.tac {
  width: 212px;
}
.el-footer {
  background-color: rgb(58, 57, 57);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
p {
  display: block;
  color: white;
  margin: 5px 0;
}
.all {
  font-size: 13px;
  height: 100vh;
}

h1 {
  font-family: "sans-serif";
  margin: 0;
  color: white;
  font-size: 30px;
}
.el-header {
  background-color: rgb(66, 72, 78);
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  background-color: rgb(84, 92, 100);
  color: #333;
  text-align: center;
  height: 100%;
}

.el-main {
  background-color: rgb(194, 189, 194) !important;
}

body > .el-container {
  margin-bottom: 40px;
}
body {
  margin: 0;
}
button {
  border: none;
  color: white;
  background-color: rgb(66, 72, 78);
  outline: none;
  display: flex;
  align-items: center;
}
.el-main {
  background-color: rgb(161, 187, 190);
}
</style>